<template>
  <div class="mustseeitem" ref="nihao" v-if="show">
    <div class="head">
      <div class="usermsg" @click="onClick">
        <img
          v-if="
            !(item.resource
              ? item.resource.author.userinfo.is_vmovier_migrate_user
              : item.children[0].model.resource.author.userinfo
                  .is_vmovier_migrate_user)
          "
          class="headicon"
          :src="
            (item.resource
              ? item.resource.author.userinfo.avatar
              : item.children[0].model.resource.author.userinfo.avatar) | picUrl
          "
          alt=""
        />
        <span class="username">{{
          item.resource
            ? item.resource.author.userinfo.username
            : item.children[0].model.resource.author.userinfo.username
        }}</span>
        <p
          class="peopcount"
          v-if="
            item.resource
              ? item.resource.team_user_count
              : item.children[0].model.resource.team_user_count
          "
        >
          和其他
          <span class="peopcoures">{{
            item.resource
              ? item.resource.team_user_count
              : item.children[0].model.resource.team_user_count
          }}</span
          >人
        </p>
      </div>
      <div class="right">
        <p @click="attention(item.resource? item.resource.author.userinfo.id: item.children[0].model.resource.author.userinfo.id)" class="guanzhu" v-if="attentionList.indexOf(item.resource
            ? item.resource.author.userinfo.id
            : item.children[0].model.resource.author.userinfo.id)==-1">+ 关注</p>
        <p @click="attention(item.resource? item.resource.author.userinfo.id: item.children[0].model.resource.author.userinfo.id)" class="guanzhu guanzhued" v-else>已关注</p>
        <i class="iconfont icon-androidgengduo"></i>
      </div>
    </div>

    <p class="title">
      {{
        item.resource
          ? item.resource.title
          : item.children[0].model.resource.title
      }}
    </p>
    <div @click="playvideo" class="video" v-if="!autoPlay">
      <img
        :src="
          (item.resource
            ? item.resource.cover
            : item.children[0].model.resource.cover) | picUrl
        "
        alt=""
      />
      <div class="upvideo">
        <span
          >{{
            item.resource
              ? item.resource.count.count_view
              : item.children[0].model.resource.count.count_view | count
          }}观看</span
        >|
        <span>{{
          item.resource
            ? item.resource.duration
            : item.children[0].model.resource.duration | delaytime
        }}</span>
      </div>
    </div>
    <div class="videobox" ref="videobox" v-if="autoPlay">
      <video
        @click="playvideo"
        ref="video"
        muted="muted"
        :src="vurl"
        class="video"
        autoplay
        @timeupdate="getCurrentTime"
      ></video>

      <div class="mute" @click="mutecontrol">
        <i v-if="mute" class="iconfont icon-shengyinjingyin"></i>
        <i v-else class="iconfont icon-shengyinkai"></i>
      </div>
    </div>
    <div class="foot">
      <span>
        <i class="iconfont icon-shoucang"></i>
        {{
          item.resource
            ? item.resource.count.count_collect
            : item.children[0].model.resource.count.count_collect | count
        }}</span
      >
      <span
        ><i class="iconfont icon-pinglun1"></i>
        {{
          item.resource
            ? item.resource.count.count_comment
            : item.children[0].model.resource.count.count_comment | count
        }}</span
      >
      <span>
        <i class="iconfont icon-31dianzan"></i>
        {{
          item.resource
            ? item.resource.count.count_like
            : item.children[0].model.resource.count.count_like | count
        }}</span
      >
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  props: {
    item: Object,
    play: String,
  },
  data() {
    return {
      vurl: null,
      autoPlay: false,
      timer: null,
      show: true,
      viewHeight: null,
      mute: true,
      logined:0,
    };
  },
  created: function () {
    this.logined = JSON.parse(window.localStorage.getItem('logined'))||0
    this.axios
      .get(
        "https://apis.netstart.cn/xpc/article/" +
          (this.item.resource
            ? this.item.resource.id
            : this.item.children[0].model.resource.id)
      )
      .then((res) => {
        var k = res.data.data.video.content.progressive;
        setTimeout(() => {
          this.vurl = k[k.length - 1].url;
        }, 10);
      });
    this.viewHeight = window.innerHeight;
  },
  updated: function () {
    this.axios
      .get(
        "https://apis.netstart.cn/xpc/article/" +
          (this.item.resource
            ? this.item.resource.id
            : this.item.children[0].model.resource.id)
      )
      .then((res) => {
        var k = res.data.data.video.content.progressive;
        setTimeout(() => {
          this.vurl = k[k.length - 1].url;
        }, 10);
      });
    this.viewHeight = window.innerHeight;
  },
  mounted() {
    window.addEventListener("scroll", this.handleScrollx, true);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScrollx);
  },
  methods: {
    attention(id){
      if(this.logined){
        this.$store.commit('addAttention',{id:id})
      }else{
        this.$router.push({path:'/loginreg'})
        this.$store.commit('addAttention',{id:id})
      }
    },
    getCurrentTime() {
      if (this.$refs.videobox) {
        this.$store.commit("bigCardCurrent", {
          value: this.$refs.videobox.querySelector(".video").currentTime,
          id: this.item.resource
            ? this.item.resource.id
            : this.item.children[0].model.resource.id,
        });
      }
    },
    onClick() {
      console.log(
        this.item.resource
          ? this.item.resource.id
          : this.item.children[0].model.resource.id
      );
      if (
        this.item.resource
          ? this.item.resource.author.userinfo.is_vmovier_migrate_user
          : this.item.children[0].model.resource.author.userinfo
              .is_vmovier_migrate_user
      ) {
        this.playvideo();
      } else {
        var id = this.item.resource
          ? this.item.resource.author.userinfo.id
          : this.item.children[0].model.resource.author.userinfo.id;
          console.log(id);
        this.$router.push({ path: "/userpage", query: { id: id } });
      }
    },
    handleScrollx() {
      this.$nextTick(() => {
        if (this.$refs.nihao) {
          if (this.timer) {
            clearTimeout(this.timer);
          }
          this.timer = setTimeout(() => {
            var top = this.$refs.nihao.getBoundingClientRect().top;
            if (top >= -50 && top < this.viewHeight / 2 - 80) {
              this.autoPlay = true;
              this.show = true;
            } else if (top > this.viewHeight) {
              this.autoPlay = false;
              this.show = false;
            } else {
              this.autoPlay = false;
              this.show = true;
            }
          }, 1000);
        }
      });
    },
    mutecontrol() {
      this.mute = !this.mute;
      if (this.mute) {
        this.$refs.video.muted = "muted";
      } else {
        this.$refs.video.muted = "";
      }
    },
    playvideo() {
      console.log(
        this.item.resource
          ? this.item.resource.id
          : this.item.children[0].model.resource.id
      );
      this.$router.push({
        path: "/playvideoview",
        query: {
          id: this.item.resource
            ? this.item.resource.id
            : this.item.children[0].model.resource.id,
        },
      });
    },
  },
  computed: {
    ...mapState(["bigCurrentTime","attentionList"]),
  },
};
</script>

<style lang="less" scoped>
.mustseeitem {
  width: 100%;
  min-height: 330px;
  background-color: #fff;
  border-radius: 10px;
  padding: 10px 0;
  position: relative;
  .head {
    display: flex;
    .usermsg {
      display: flex;
      padding: 0px 10px;
      align-items: center;
      flex: 1;
      .headicon {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        vertical-align: middle;
      }
      .username {
        color: #000;
        font-weight: 600;
        margin: 0 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 200px;
      }
      .peopcount {
        color: #aaa;
        .peopcoures {
          color: #000;
          font-weight: 600px;
        }
      }
    }
    .right {
      text-align: right;
      display: flex;
      align-items: center;
      margin-right: 10px;
      justify-content: space-between;
      .guanzhu {
        color: #eb4f4b;
        &.guanzhued{
          color: #aaa;
        }
      }
      i {
        color: #cacac9;
        font-size: 20px;
      }
    }
  }

  .title {
    font-size: 18px;
    color: #000;
    font-weight: 600;
    margin: 10px 10px;
    width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .video {
    width: 100%;
    height: 200px;
    position: relative;
    overflow: hidden;
    filter: blur(0px) brightness(0.9);
    .upvideo {
      color: #ddd;
      font-size: 14px;
      position: absolute;
      right: 10px;
      bottom: 15px;
    }
  }
  .videobox {
    width: 100%;
    height: 200px;
    position: relative;
    display: flex;
    align-items: center;
    background-color: #000;
    .video {
      width: 100%;
      height: 100%;
      max-height: 100%;
    }
    .mute {
      position: absolute;
      left: 20px;
      bottom: 15px;
      i {
        color: white;
        font-size: 30px;
      }
    }
  }
  .foot {
    display: flex;
    justify-content: space-around;
    color: #7c7c7c;
    font-size: 14px;
    position: absolute;
    bottom: 10px;
    width: 100%;
  }
}
</style>